<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="lib/js/jquery-2.0.2.js"></script>
    <!--script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script-->
    <script type="text/javascript">
        $(document).ready(function(){
            var items = [
                /*{"id":"i1","name":"Apple","type":"item","depends":"[{'id':'c1','persent':'100'}]"},
                {"id":"i2","name":"Potato","type":"item","depends":"[{'id':'c2','persent':'100'}]"},
                {"id":"i3","name":"Cucumber","type":"item","depends":"[{'id':'c1','persent':'30'},{'id':'c2','persent':'70'}]"},
                {"id":"i4","name":"Pineapple","type":"item","depends":"[{'id':'c1','persent':'90'},{'id':'c2','persent':'10'}]"},
                {"id":"i5","name":"Brussels sprouts","type":"item","depends":"[{'id':'c2','persent':'100'}]"},
                {"id":"i6","name":"Soup car","type":"item","depends":"[{'id':'c3','persent':'100'}]"},
                {"id":"i7","name":"Melon","type":"item","depends":"[{'id':'c1','persent':'100'}]"},
                {"id":"i8","name":"Tomato","type":"item","depends":"[{'id':'c1','persent':'5'},{'id':'c2','persent':'95'}]"},
                {"id":"i9","name":"Peach","type":"item","depends":"[{'id':'c1','persent':'100'}]"},
                {"id":"i10","name":"Banana","type":"item","depends":"[{'id':'c1','persent':'34'},{'id':'c2','persent':'33'},{'id':'c3','persent':'33'}]"},
                {"id":"i11","name":"House","type":"item","depends":"[{'id':'c3','persent':'98'},{'id':'c1','persent':'1'},{'id':'c2','persent':'1'}]"} */
            ];
            var categories =  [
                /*{"id":"c1","name":"Fruits","type":"category","depends":"[{'id':'i1','persent':'100'},{'id':'i3','persent':'30'},{'id':'i4','persent':'90'},{'id':'i7','persent':'100'}, {'id':'i8','persent':'5'},{'id':'i9','persent':'100'},{'id':'i10','persent':'34'},{'id':'i11','persent':'1'}]"},
                {"id":"c2","name":"Vegetable","type":"category","depends":"[{'id':'i2','persent':'100'},{'id':'i3','persent':'70'},{'id':'i4','persent':'10'},{'id':'i5','persent':'100'}, {'id':'i8','persent':'95'},{'id':'i10','persent':'33'},{'id':'i11','persent':'1'}]"},
                {"id":"c3","name":"Non eating staff","type":"category","depends":"[{'id':'i6','persent':'100'},{'id':'i10','persent':'33'},{'id':'i11','persent':'1'}]"}*/
            ];

            createSubmittionDateTable(items, categories, '#mainContent div[inner-box]');

            $('.line,.line_invert').each(function(){
                $(this).mouseover(function(){
                    $(this).find('div[data-id]').addClass('mouse_over_class');
                    highlight($(this).find('div[data-id]'));
                });
                $(this).mouseleave(function(){
                    $(this).find('div[data-id]').removeClass('mouse_over_class');
                    unhighlight();
                });
                $(this).click(function(){
                    alert('ok');

                })
            });
        });

        function createSubmittionDateTable(items, categories, content){
            var length_item = items.length;
            var length_category = categories.length;
            var main, additional;
            if(length_item > length_category){
                main = items;
                additional = categories;
            }else{
                main = categories;
                additional = items;
            }
            var counter = 200;
            for(var i=0; i < main.length; i++){
                var item, category;
                if(main[i]['type'] == 'item'){
                    item = main[i];
                    category = additional[i];
                }else{
                    item = additional[i];
                    category = main[i];
                }
                var element = '<div class="div_data">';
                element = element +	'<div style="width: '+counter+'px; float: left">';
                if(item){
                    element = element +	'<div class="line">';
                    element = element +	'<div class="checker-box-right" data-id="'+item['id']+'" data-link="'+item['depends']+'" data-type="'+item['type']+'"></div>';
                    element = element +	'<div data-text>'+item['name']+'</div>';
                    element = element +	'</div>';
                }
                element = element +	'</div>';

                element = element + '<div class="div_box">';
                element = element + '</div>';

                element = element +	'<div style="width: 100%">';
                if(category){
                    element = element +	'<div class="line_invert">';
                    element = element +	'<div class="checker-box-left" data-id="'+category['id']+'" data-link="'+category['depends']+'" data-type="'+category['type']+'"></div>';
                    element = element +	'<div data-text>'+category['name']+'</div>';
                    element = element +	'</div>';
                }
                element = element +	'</div>';
                element = element +	'</div>';
                $(content).append(element);
                counter = counter + 20;
            }
        }

        function highlight(item){
            var _id = $(item).data('id');
            var _link = $(item).data('link');
            if(_link){
                _link = eval(_link);

                for(var i=0; i<_link.length; i++){
                    var el= $('#mainContent').find('div[data-id='+_link[i]['id']+']');
                    var type = $(el).data('type');
                    var sib_class = (type == 'item')?'left':'right';
                    var sibling = el.siblings('div[data-text]');
                    sibling.not(':has(div[data-percent])').append('<div data-percent style="float:'+sib_class+'">'+_link[i]['persent']+'%<div>');
                }

                $('#mainContent div[data-id]').each(function(){
                    var _currentId = $(this).data('id');
                    var	_isHide = true;
                    if(_currentId == _id)
                        _isHide = false;
                    for(var i=0; i<_link.length; i++){
                        if(_link[i]['id'] == _currentId){
                            _isHide = false;
                        }
                    }
                    if(_isHide) $(this).parent().addClass('hide_class');
                });
            }
        }
        function unhighlight(){
            $('#mainContent div[data-id]').each(function(){
                $(this).parent().removeClass('hide_class');
                $(this).parent().find('div[data-percent]').remove();
            });
        }
    </script>
    <style type="text/css">
        #mainContent{
            margin: 200px 0px 0px 100px;
            border: 0px solid #525252;
            width: 50%;
            height: 100%;
            padding: 10px;
            position: relative;
        }
        .checker-box-left{
            width: 10px;
            height: 10px;
            border: 1px solid #525252;
            background: #00B060;
            margin: 4px 15px 0px 10px;
            float: left;
            position: relative;
        }
        .checker-box-right{
            width: 10px;
            height: 10px;
            border: 1px solid #525252;
            background: #00B060;
            margin: 4px 10px 0px 15px;
            float: right;
            position: relative;
        }
        .line{
            width:100%;
            text-align: right;
            cursor: pointer;
        }
        .line_invert{
            width: 100%;
            text-align: left;
            cursor: pointer;
        }
        .div_box{
            width: 20px;
            height: 20px;
            float: left;
        }

        .div_data{
            width: 100%;
            height: 35px;
        }
        .mouse_over_class{
            background: #FF4500;
        }
        .hide_class{
            color: grey;
        }
        .hide_class div[data-id]{
            background: #fff;
        }
    </style>
</head>
<body>
<div id="mainContent">
    <div style="border: 1px solid #525252; padding: 10px" inner-box>

    </div>
</div>
</body>
</html>